<template>
  <div class="page-header-index-wide">







    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总片数" :total="dataTop.TOTALSEPARATE | NumberFormat">
          <div>
            <trend style="margin-right: 16px;">
              <span slot="term">本期数</span>
              {{ queryParam.sjrq }}
            </trend>
          </div>
          <template slot="footer">报文总记录行数：<span> {{ dataTop.TOTALROWNUM | NumberFormat }}</span></template>
        </chart-card>
      </a-col>


      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="报文上报成功量" :total="dataTop.SBCGL | NumberFormat">
          <div>
            <mini-bar :dataSource="chartData" :height="40" />
          </div>
          <template slot="footer">上报成功率 <span>{{ dataTop.SBCGL/dataTop.TOTALSEPARATE*100 | floatFormat }}%</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="强制上报量" :total="dataTop.QZSBL | NumberFormat">
          <div>
            <mini-area :dataSource="forceData" />
          </div>
          <template slot="footer">强制上报率 <span>{{ dataTop.QZSBL/dataTop.TOTALSEPARATE*100 | floatFormat }}%</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="异常报文量" :total="dataTop.YCBWL | NumberFormat">
          <div>
            <mini-bar :dataSource="exData" :height="40" />
          </div>
          <template slot="footer">异常率<span> {{ dataTop.YCBWL/dataTop.TOTALSEPARATE*100 | floatFormat }}%</span></template>
        </chart-card>
      </a-col>

    </a-row>




    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">

      <a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
        <div class="extra-wrapper" slot="tabBarExtraContent">
<!--          <a style="color: red">上报开放窗口状态：20210112</a>&nbsp;&nbsp;&nbsp;
          <a style="color: red">系统维护窗口状态：关闭</a>-->
          日期： <j-date placeholder="请选择数据日期" v-model="queryParam.rsjrq" @change="judgerSjrq"></j-date>
        </div>

        <a-tab-pane loading="true" tab="待办任务" key="1">
          <a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1" style="padding-left: 10px;padding-right: 10px;">
<!--            <template slot="flowRate" slot-scope="text, record, index">
              <a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
            </template>-->
            <template slot="action" slot-scope="text, record, index">

                 <a @click="exportXlsInfo(record)">下载</a>

            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane loading="true" tab="任务完成统计" key="2">
          <a-table :dataSource="dataSource3" size="default" rowKey="id" :columns="columns2" :pagination="ipagination3" @change="tableChange3" style="padding-left: 10px;padding-right: 10px;">
            <!--            <template slot="flowRate" slot-scope="text, record, index">
                          <span style="color: red;">{{ record.flowRate }}小时</span>
                        </template>-->
          </a-table>
        </a-tab-pane>

        <!--<a-tab-pane loading="true" tab="报送提醒" key="2">
          <a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2" style="padding-left: 10px;padding-right: 10px;">
&lt;!&ndash;            <template slot="flowRate" slot-scope="text, record, index">
              <span style="color: red;">{{ record.flowRate }}小时</span>
            </template>&ndash;&gt;
          </a-table>
        </a-tab-pane>-->
      </a-tabs>
    </a-card>
    <br>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
             数据日期： <j-date placeholder="请选择数据日期" v-model="queryParam.sjrq" @change="judgeSjrq"></j-date>
<!--             &nbsp;&nbsp;&nbsp;法人标识： <j-dict-select-tag style="width: 200px"  placeholder="请选择法人标识" v-model="queryParam.bankCode" dictCode="llbb_juridical_person,BANKNAME,BANKCODE"/>-->
          </div>
          <a-tab-pane loading="true" tab="日报文统计" key="1">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <bar title="报文量" :dataSource="reportData"/>
              </a-col>
<!--              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="实时统计" :list="topData"/>
              </a-col>-->
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

  </div>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {httpAction, getAction, downFile} from '@/api/manage'

  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'

  const rankList = []
  for (let i = 0; i < 7; i++) {
    rankList.push({
      name: 'xxxx银行' + (i+1) + ' 支行',
      total: 1234 - i * 66
    })
  }
  const barData = []
  for (let i = 0; i < 12; i += 1) {
    barData.push({
      x: `${i + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200
    })
  }

 /* NUM: 2
  REPORTDATE: "2021-06-05"
  REPORT_CODE: "GRKHXX"
  ROW_ID: 1
  SJRQ: "2021-06-02"
  TABLENAME: "个人客户信息表"*/

  const dataCol1 = [{
    title: '任务列表',
    align:"center",
    dataIndex: 'TABLENAME'
  },{
    title: '数据日期',
    align:"center",
    dataIndex: 'SJRQ'
  },{
    title: '校验错误数',
    align:"center",
    dataIndex: 'NUM'
  },{
    title: '报送期限',
    align:"center",
    dataIndex: 'REPORTDATE'
  },
    {
      title: '操作',
      dataIndex: 'action',
      align:"center",
      fixed:"right",
      width:147,
      scopedSlots: { customRender: 'action' }
    }];
 /* const ddd=[
    {NUM: 2,
      REPORTDATE: "2021-06-05",
      REPORT_CODE: "GRKHXX",
      ROW_ID: 1,
      SJRQ: "2021-06-02",
      TABLENAME: "个人客户信息表"},
    {NUM: 2,
      REPORTDATE: "2021-06-05",
      REPORT_CODE: "GRKHXX",
      ROW_ID: 1,
      SJRQ: "2021-06-02",
      TABLENAME: "个人客户信息表"},
    {NUM: 2,
      REPORTDATE: "2021-06-05",
      REPORT_CODE: "GRKHXX",
      ROW_ID: 1,
      SJRQ: "2021-06-02",
      TABLENAME: "个人客户信息表"}
  ]*/

  /*CLZT: "未处理"
  FKZT: "未反馈"
  ROW_ID: 1
  RQ: "2021-06-03"
  SBZT: "未上报"*/
  const dataCol2 = [{
    title: '数据日期',
    align:"center",
    dataIndex: 'SJRQ'
  },{
    title: '任务总数(表)',
    align:"center",
    dataIndex: 'REPORTCOUNT'
  },{
    title: '数据生成状态',
    align:"center",
    dataIndex: 'DATASTATUS'
  },{
    title: '已校验成功',
    align:"center",
    dataIndex: 'VERIFYSTATUS'
  }
    ,{
      title: '已提交成功',
      align:"center",
      dataIndex: 'COMMITSTATUS'
    }];
 /* const dataSource2=[
    {reBizCode:"已反馈",hgs:"45161",acceptBy:'上报成功 ',acceptDate:"2021-05-12",curNode:"已处理",flowRate:12},
    {reBizCode:"已反馈",hgs:"1315",acceptBy:'上报成功',acceptDate:"2021-05-12",curNode:"已处理",flowRate:3},
    {reBizCode:"未反馈",hgs:"245",acceptBy:'未上报 ',acceptDate:"2021-05-12",curNode:"未处理",flowRate:24},
    {reBizCode:"已反馈",hgs:"78945",acceptBy:'上报成功',acceptDate:"2021-05-12",curNode:"已处理",flowRate:10},
    {reBizCode:"未反馈",hgs:"4312",acceptBy:'未上报 ',acceptDate:"2021-05-12",curNode:"未处理",flowRate:8},
    {reBizCode:"已反馈",hgs:"124556",acceptBy:'上报失败',acceptDate:"2021-05-12",curNode:"已处理",flowRate:10},
    {reBizCode:"已反馈",hgs:"12345",acceptBy:'上报成功 ',acceptDate:"2021-05-12",curNode:"已处理",flowRate:24},
    {reBizCode:"已反馈",hgs:"23543",acceptBy:'上报失败',acceptDate:"2021-05-12",curNode:"未处理",flowRate:30},
    {reBizCode:"已反馈",hgs:"45643",acceptBy:'上报成功',acceptDate:"2021-05-12",curNode:"已处理",flowRate:1},
    {reBizCode:"已反馈",hgs:"245664",acceptBy:'强制上报',acceptDate:"2021-05-12",curNode:"已处理",flowRate:16},
    {reBizCode:"未反馈",hgs:"12411",acceptBy:'未上报 ',acceptDate:"2021-05-12",curNode:"未处理",flowRate:7},
  ]*/


  export default {
    name: "IndexChart",
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {
        topData:[],
        reportData:[],
        exData:[],
        forceData:[],
        chartData:[],
        dataTop:{},
        queryParam:{
          sjrq:'',
          rsjrq:'',
          bankCode:''
        },
        loading: true,
        center: null,
        rankList,
        barData,
        loginfo:{},
        visitFields:['ip','visit'],
        visitInfo:[],
        indicator: <a-icon type="loading" style="font-size: 24px" spin />,
        dataSource1:[],
        dataSource2:[],
        dataSource3:[],
        columns:dataCol1,
        columns2:dataCol2,
        ipagination1:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5','10'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,

        },
        ipagination2:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5','10'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
        },
        ipagination3:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5','10'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
        },
        indexRegisterType:"转移登记",
        indexBottomTab:"1"
      }
    },
    created() {

      let oDate2 = new Date();
      let n=oDate2.getFullYear();
      let y=oDate2.getMonth()+1;
      let r=oDate2.getDate();
      this.queryParam.rsjrq=this.getNowFormatDate();
      this.queryParam.sjrq=this.getNowFormatDate();//n+'-'+y+'-'+r;
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      //this.initLogInfo();
      this.findHomePageTop();
      this.findReportSuccess();
      this.findForce();
      this.findException();
      this.findDayReportList();
      this.findBankTop();

      this.loadDataSource1();
      this.loadDataSource2();
      this.loadDataSource3();
    },
    watch: {
      'queryParam.bankCode': {
        handler (newName, oldName) {
          this.findDayReportList();
          this.findBankTop();
        }
      }
    },
    methods: {
      exportXlsInfo(obj){//REPORT_CODE
        let fileName="校验结果";
        let param = {};
          param.sjrq = obj.SJRQ;
          param.reportCode = obj.REPORT_CODE;
         let downloadUrl = '/verificationresult/llbbVerificationResult/exportXls';

        downFile(downloadUrl,param).then((data)=>{
          if (!data) {
            this.$message.warning("文件下载失败")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
          }else{
            let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName+'.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          }
        })
      },
      tableChange1(pagination){
        this.ipagination1.current = pagination.current
        this.ipagination1.pageSize = pagination.pageSize
        this.loadDataSource1();
      },
      tableChange2(pagination){
        this.ipagination2.current = pagination.current
        this.ipagination2.pageSize = pagination.pageSize
        this.loadDataSource2();
      },
      tableChange3(pagination){
        this.ipagination3.current = pagination.current
        this.ipagination3.pageSize = pagination.pageSize
        this.loadDataSource3();
      },
      getFlowRateNumber(value){
        return Number(value)
      },
      getPercentFormat(value){
        if(value==100){
          return "超时"
        }else{
          return value+"%"
        }
      },
      getPercentColor(value){
        let p = Number(value)
        if(p>=90 && p<100){
          return 'rgb(244, 240, 89)'
        }else if(p>=100){
          return 'red'
        }else{
          return 'rgb(16, 142, 233)'
        }
      },

      loadDataSource1(){
        let that=this;

        var params = {};//查询条件
        params.pageNo = this.ipagination1.current;
        params.pageSize = this.ipagination1.pageSize;
        params.sjrq=this.queryParam.rsjrq;
        getAction("/messagemanagement/homePage/selectDbTask", params).then((res) => {
          if (res.success) {

            that.dataSource1 = res.result.records;
            if(res.result.total)
            {
              that.ipagination1.total = res.result.total;
            }else{
              that.ipagination1.total = 0;
            }
          }
          if(res.code===510){
            that.$message.warning(res.message)
          }
        })

      },
      loadDataSource2(){
        /*this.dataSource2 = dataSource2.filter(item=>{
          if(!this.indexRegisterType){
            return true
          }
          return item;
        })*/

        let that=this;
        var params = {};//查询条件
        params.pageNo = this.ipagination2.current;
        params.pageSize = this.ipagination2.pageSize;
        params.sjrq=this.queryParam.rsjrq;
        getAction("/messagemanagement/homePage/selectTxTask", params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            that.dataSource2 = res.result.records||res.result;
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
        })

      },
      loadDataSource3(){
        let that=this;
        var params = {};//查询条件
        params.pageNo = this.ipagination3.current;
        params.pageSize = this.ipagination3.pageSize;
        params.sjrq=this.queryParam.rsjrq;
        getAction("/messagemanagement/homePage/taskCount", params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            that.dataSource3 = res.result.records;
            console.log("dataSource3"+ that.dataSource3[0].SJRQ)
            if(res.result.total)
            {
              that.ipagination3.total = res.result.total;
            }else{
              that.ipagination3.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
        })

      },
      findBankTop(){
        let that=this;
        getAction('/messagemanagement/homePage/findBankTop',this.queryParam).then((res)=>{
          if(res.success){
            that.topData=res.result;
          }
        })
      },
      findDayReportList(){
        let that=this;
        getAction('/messagemanagement/homePage/findDayReportList',that.queryParam).then((res)=>{
          if(res.success){
            that.reportData=res.result;
          }
        })
      },
      findException(){
        let that=this;
        httpAction('/messagemanagement/homePage/findException',this.queryParam,"GET").then((res)=>{
          if(res.success){
            that.exData=res.result;
          }
        })
      },
      findForce(){
        let that=this;
        httpAction('/messagemanagement/homePage/findForce',this.queryParam,"GET").then((res)=>{
          if(res.success){
            that.forceData=res.result;
          }
        })
      },
      findReportSuccess(){
        let that=this;
        httpAction('/messagemanagement/homePage/findReportSuccess',this.queryParam,"GET").then((res)=>{
          if(res.success){
            that.chartData=res.result;
          }
        })
      },
      findHomePageTop(){
        let that=this;
        httpAction('/messagemanagement/homePage/findHomePageTop',this.queryParam,"GET").then((res)=>{
          if(res.success){
            that.dataTop=res.result[0];
          }
        })
      },
      judgerSjrq(){
        this.ipagination1.current = 1;
        this.ipagination1.pageSize = 5;
        this.loadDataSource1();
        this.ipagination2.current = 1;
        this.ipagination2.pageSize = 5;
        this.loadDataSource2();
        this.ipagination3.current = 1;
        this.ipagination3.pageSize = 5;
        this.loadDataSource3();
      },
      judgeSjrq(){
        let oDate2 = new Date();
        let n=oDate2.getFullYear();
        let y=oDate2.getMonth()+1;
        let r=oDate2.getDate();
        let nowDate=n+'-'+y+'-'+r;
        if(this.queryParam.sjrq==null || this.queryParam.sjrq=='' || this.queryParam.sjrq==undefined){
          this.$message.warning("数据日期不能为空");
          this.queryParam.sjrq=nowDate;
          return false;
        }
        let oDate1 = new Date(this.queryParam.sjrq);
        if(oDate1.getTime() > oDate2.getTime()){
          this.queryParam.sjrq=nowDate;
          this.$message.warning("数据日期不能大于当前时间，请重新选择");
          return false;
        }
        this.findDayReportList();
        this.findBankTop();
      },
      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
             this.visitInfo = res.result;
           }
         })
      },
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      }
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>